<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>一分钟诊所-注册</title>

        <link rel="shortcut icon" type="image/png" th:href="@{../images/fav.png}">
        <link rel="stylesheet" th:href="@{../css/bootstrap.min.css}">
        <script th:src="@{../js/jquery-3.2.1.min.js}"></script>
    <script th:src="@{../js/bootstrap.min.js}"></script>
</head>
<body>
    <!--注册头部-->
    <div id="reg_header">
        <div class="reg_h_center">
            <h3>欢迎注册</h3>
            <div class="reg_h_right">
                <span>已有账户!</span><a style="color: #0066FF" href="/login">请登录</a>
            </div>
        </div>
    </div>
    <br />
    <br />
    <br />
    <!-- style="width: 1100px;float:right" -->
    <div style="background-color:#F8F8F8 ; height: 400px">
        <br />

        <div align="center">
            <label> 用户注册</label>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" Role="form"style="margin-left: 820px">
                <div class="form-group">
                    <label class="col-sm-2"> 用户名</label>
                    <div class="col-sm-3" align="center">
                        <input type="text" class="form-control" id="username"
                               name="username" placeholder="用户名"> <span id="helpBlock2"
                                                                        class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">密 码</label>
                    <div class="col-sm-3">
                        <input type="password" class="form-control" id="password"
                               name="password" placeholder="密 码">
                        <span id="helpBlock3" class="help-block"></span>
                    </div>
                </div>
                <div  class="form-group">
                    <label for="email" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="email" name="email"
                               placeholder="邮箱"> <span id="helpBlock4" class="help-block"></span>
                    </div>
                </div>
                <div  class="form-group">
                <label class="register_bottom3_infot">&nbsp;&nbsp;&nbsp;&nbsp;身份：</label>
                <input type="radio" name="roleid" value="2" class="register_bottom2_type" checked="checked"/><span>用户</span>
                <input type="radio" name="roleid" value="3" class="register_bottom2_type"/><span>医生</span>
                </div>
            </form>
        </div>
        <div style="height: 20px; text-align: center; color: red;">
            <div style="text-align: center; color: red">
                <input class="btn btn-primary" type="button" id="regist" value="注册" />
            </div>
            <span id="msgs"> </span>
        </div>
    </div>
    <script type="text/javascript">
        var checkResult_name = false;
        var checkResult_email=false;

        //1.对姓名进行正则表达式校验
        function checkNameForReg() {
            //1.姓名验证：姓名必须由2~10位大小写英文字母、空格、中文组成
            var regName =/^\w{2,10}$/;
            var nameVal = $("#username").val();
            if(!regName.test(nameVal)){
                $("#username").next("span").text("用户名不合规范，用户名要求2-10位");
                $("#username").parent().addClass("has-error");
                return false;
            }else{
                $("#username").next("span").empty();
                $("#username").parent().removeClass("has-error has-success");
                $("#username").parent().addClass("has-success");
                return true;
            }
        }

        //2.对邮箱进行正则表达式校验
        function checkEmailForReg() {
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            var emailVal = $("#email").val();
            if(!regEmail.test(emailVal)){
                $("#email").next("span").text("邮箱不符合格式");
                $("#email").parent().addClass("has-error");
                return false;
            }else{
                $("#email").next("span").empty();
                $("#email").parent().removeClass("has-error has-success");
                return true;
            }
        }
        $("#username").blur(function() {
            //1.对姓名进行正则表达式校验
            if(checkNameForReg()){
                //2.姓名进行重名校验
                $.ajax({
                    url : "/toUserName",
                    type : "POST",
                    data : {
                        "username" : $(this).val()
                    },
                    success : function(result) {
                        if (result.code== 200) {
                            $("#username").next("span").text("可以使用该用户名");
                            $("#username").parent().addClass("has-success");
                            checkResult_name = true;
                        } else {
                            $("#username").parent().addClass("has-error");
                            $("#username").next("span").text("该姓名已存在");
                            checkResult_name = false;
                        }
                    }
                });
            }
        });
        //当邮箱文本框失去焦点时，对其进行正则检验
        $("#email").blur(function() {
            if(checkEmailForReg()){
                checkResult_email = true;
            }else{
                checkResult_email = false;
            }
        });
        //-----//
        $("#regist").click(function() {
            if(checkNameForReg()&&checkEmailForReg()){
                var json={
                    "username": $("input:text[name='username']").val(),
                    "password": $("input:password[name='password']").val(),
                    "email": $("input:text[name='email']").val(),
                    "role": {
                        "roleid":$("input:radio[name='roleid']:checked").val()
                    }
                }
                console.log(json);
                $.ajax({
                    url : "toRegist",
                    type : "post",
                    dataType:"json",
                    data : JSON.stringify(json),
                    contentType: "application/json;charsetset=UTF-8",
                    success : function(result) {
                        if (result.code == 300) {
                            $("#code").next().next("span").text(result.data.msg);
                            $("#code").parent().addClass("has-error");
                           // $("#msgs").text(result.data.msg);
                        } else {
                            alert(result.data.msg);
                            window.location.href = "/login";
                        }
                    }

                });
            }

        });
    </script>
</body>
</html>
